<template>
	<!-- 线下店铺 -->
	<view class="diy-shop" v-if="dataList.length>0">
		<view class="shop-item" v-for="(dataItem, index) in dataList" :key="index">
			<form @submit="onTargetDetail" report-submit="true" :data-id="dataItem.shop_id">
				<button formType="submit" class="btn-normal dis-flex flex-y-center">
					<view class="shop-item__logo"><image class="image" :src="dataItem.logo_image"></image></view>
					<view class="shop-item__content flex-box">
						<view class="shop-item__title">
							<span>{{ dataItem.shop_name }}</span>
						</view>
						<view class="shop-item__address onelist-hidden">
							<span>门店地址：{{ dataItem.region.province }}{{ dataItem.region.city }}{{ dataItem.region.region }}{{ dataItem.address }}</span>
						</view>
						<view class="shop-item__phone">
							<span>联系电话：{{ dataItem.phone }}</span>
						</view>
					</view>
				</button>
			</form>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		itemIndex: String,
		itemStyle: Array,
		dataList: Array
	},
	data() {
		return {};
	},
	methods: {
		/**
		 * 跳转门店详情页
		 */
		onTargetDetail(e) {
			// 记录formid
			this.navigateTo({
				url: '/pages/shop/detail/index?shop_id=' + e.currentTarget.dataset.id
			});
		}
	}
};
</script>

<style>
/* 线下门店 */

.shop-item {
	padding: 16rpx 30rpx;
	min-height: 180rpx;
	font-size: 26rpx;
	line-height: 1.5;
	border-bottom: 1rpx solid #eee;
	box-sizing: border-box;
}

.shop-item__logo {
	margin-right: 30rpx;
}

.shop-item__logo .image {
	display: block;
	width: 130rpx;
	height: 130rpx;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.1);
	/* box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1); */
}

.shop-item__title {
	font-size: 28rpx;
	color: #fd4a5f;
	margin-bottom: 10rpx;
}

.shop-item__address,
.shop-item__phone {
	color: #919396;
}

.shop-item__address {
	width: 520rpx;
}

.shop-item__distance {
	margin-top: 10rpx;
	color: #c1c1c1;
	height: 40rpx;
}

.shop-item__distance .suifont {
	color: #81838e;
	margin-right: 6rpx;
}
</style>
